<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <zp-button>自定义组件传递数据</zp-button>

  <script type="module">
    import ZPElement from './ZPElement.js';
    class ZPButton extends ZPElement {
      get template(){
        return `
        <button>
          <slot></slot>
        </button>
        `;
      }

      get style(){
        return `
        button{
          color: red;
        }
        `;
      }

      constructor(){
        super();
      }
    }

    customElements.define('zp-button', ZPButton);
  </script>
</body>
</html>